<template>
  <!-- 流量概况 -->
  <div class="page-flow-profile">
    <!-- 统计时间 -->
    <Header @date-change="onDateChange" />
    <!-- 流量总览 -->
    <Overview
      :date-type="dateType"
      :date-range="dateRange"
      :sys-type="systemType"
      @change-sys-type="onChangeSysType"
    />
    <!-- 流量趋势 -->
    <Trend
      :date-type="dateType"
      :date-range="dateRange"
      :sys-type="systemType"
      @change-sys-type="onChangeSysType"
    />
    <!-- 流量来源构成 -->
    <Source
      :date-type="dateType"
      :date-range="dateRange"
    />
  </div>
</template>

<script setup>
import moment from 'moment'
import Header from './components/header.vue'
import Overview from './components/overview.vue'
import Trend from './components/trend.vue'
import Source from './components/source.vue'

const dateType = ref(7)
const dateRange = ref([])
const onDateChange = (data) => {
  dateType.value = data.timeType
  // 转成时间戳格式
  dateRange.value = [moment(data.dateRange[0]).unix() * 1000, moment(data.dateRange[1]).unix() * 1000]
}

const systemType = ref(0)
const onChangeSysType = (sysTyoe) => {
  systemType.value = sysTyoe
}

</script>

<!-- eslint-disable-next-line vue-scoped-css/enforce-style-type -->
<style lang="scss">
.page-flow-profile {
  .base-section {
    padding: 10px;
    background-color: #f7f8fa;
    margin-bottom: 16px;
  }
  .flow-title {
    width: 100%;
    height: 62px;
    background: #F7F8FA;
    box-sizing: border-box;
    padding: 19px 20px;
    display: flex;
    justify-content: space-between;
    margin: 20px 0 10px 0;
    .flow-title-left {
      display: flex;
      align-items: center;
      .line {
      width: 4px;
      height: 19px;
      background: #155bd4;
      opacity: 1;
      border-radius: 2px;
      margin-right: 10px;
    }
      .text {
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        opacity: 1;
      }
    }
    .flow-title-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  .flow-form {
    padding: 0 20px 10px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
